import React from 'react';
import {
  Button,
  Form,
  Input,
  DatePicker,
  Card,
  Content,
  Select,
  Radio,
  Checkbox,
  Switch,
} from 'react-fule-ui';

export default function FuleForm() {
  // 日期选择
  const funDatePicker = (age, month, day) => [age, month, day];

  // 多选 Checkbox
  const CheckboxValue = (value) => {
    console.log(value);
  };
  return (
    <Content>
      <Content.Header>表单</Content.Header>
      <Content.Body>
        <Card>
          <Card.Header>表单模版</Card.Header>
          <Card.Body>
            <Form allAlign="top" labelStyle={{ minWidth: '114px' }}>
              <Form.Item
                label="文案 Text"
                des="内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容"
              ></Form.Item>
              <Form.Item label="开关 Switch" des="我是文案介绍" align="top">
                <Switch />
              </Form.Item>
              <Form.Item label="多选 Checkbox" align="top">
                <Checkbox onClick={CheckboxValue}>
                  <Checkbox.Item>12</Checkbox.Item>
                  <Checkbox.Item>13</Checkbox.Item>
                </Checkbox>
              </Form.Item>
              <Form.Item label="单选 Radio" align="top">
                <Radio defaultValue="男">
                  <Radio.Item>男</Radio.Item>
                  <Radio.Item>女</Radio.Item>
                  <Radio.Item>中性</Radio.Item>
                </Radio>
              </Form.Item>
              <Form.Item label="单选 Radio - btn">
                <Radio defaultValue="男" type="btn">
                  <Radio.Item>男</Radio.Item>
                  <Radio.Item>女</Radio.Item>
                  <Radio.Item>中性</Radio.Item>
                </Radio>
              </Form.Item>
              <Form.Item label="输入框 Input">
                <Input />
              </Form.Item>
              <Form.Item label="输入框 Input" status="error">
                <Input />
              </Form.Item>
              <Form.Item label="下拉选择 Select">
                <Select defaultValue="123">
                  <Select.Item>12</Select.Item>
                  <Select.Item>123</Select.Item>
                  <Select.Item>12223</Select.Item>
                </Select>
              </Form.Item>
              <Form.Item label="日期 DatePicker 1" des="请选择日期">
                <DatePicker
                  defaultValue="2021-02-20"
                  starAge="2020"
                  endAge="2028"
                  open={false}
                  onChange={funDatePicker}
                ></DatePicker>
              </Form.Item>
              <Form.Item label="日期 DatePicker 2" des="请选择日期">
                <DatePicker
                  placeholder="请选择日期"
                  defaultValue="2021-02-20"
                  starAge="2020"
                  endAge="2028"
                  open={false}
                  onChange={funDatePicker}
                ></DatePicker>
              </Form.Item>
              <Form.Item
                label="日期 DatePicker 2"
                des="请选择日期"
                errorDes="xxxxx"
              >
                <DatePicker
                  // placeholder="请选择日期"
                  defaultValue="2021-20-20"
                  starAge="2020"
                  endAge="2028"
                  onChange={funDatePicker}
                ></DatePicker>
              </Form.Item>
            </Form>
          </Card.Body>
          <Card.Foot>
            <Button type="button" primary>
              确定
            </Button>
            <Button type="button">取消</Button>
          </Card.Foot>
        </Card>
      </Content.Body>
    </Content>
  );
}
